import { useLocation } from 'react-router-dom';
import { Link, Outlet } from 'umi';
import styles from './index.less';

export default function Layout() {
  const location = useLocation();
  const navItems = [
    { path: '/', label: '流式聊天' },
    { path: '/memory', label: '记忆链' },
    { path: '/promptTemplate', label: '提示词模板' },
    { path: '/promptCombin', label: '提示词组合' },
    { path: '/document', label: '文档' },
    { path: '/toolsCall', label: '工具调用' },
    { path: '/uploadDemo', label: '上传文件' },
  ];

  return (
    <div className={styles.layout}>
      <nav className={styles.nav}>
        <ul className={styles.tabList}>
          {navItems.map((item) => (
            <li key={item.path} className={styles.tabItem}>
              <Link
                to={item.path}
                className={`${styles.tabLink} ${location.pathname === item.path ? styles.active : ''}`}
              >
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
      <main className={styles.content}>
        <Outlet />
      </main>
    </div>
  );
}
